<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<!--<![endif]-->
<head>
	<meta charset="utf-8" />
	<title>Color Admin | Timeline</title>
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
	<meta content="" name="description" />
	<meta content="" name="author" />
	
	<!-- ================== BEGIN BASE CSS STYLE ================== -->
	<link href="assets/public/plugins/jquery-ui/themes/base/minified/jquery-ui.min.css" rel="stylesheet" />
	<link href="assets/public/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
	<link href="assets/public/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
	<link href="assets/public/css/animate.min.css" rel="stylesheet" />
	<link href="assets/public/css/style.min.css" rel="stylesheet" />
	<link href="assets/public/css/style-responsive.min.css" rel="stylesheet" />
	<link href="assets/public/css/theme/default.css" rel="stylesheet" id="theme" />
	<!-- ================== END BASE CSS STYLE ================== -->
</head>
<body>
	<!-- begin #page-container -->
	<div id="page-container" class="fade page-sidebar-fixed page-header-fixed">
		<!-- begin #content -->
		<div id="content" class="content">
			<!-- begin breadcrumb -->
			<ol class="breadcrumb pull-right">
				<li><a href="javascript:;">Home</a></li>
				<li><a href="javascript:;">Extra</a></li>
				<li class="active">Timeline</li>
			</ol>
			<!-- end breadcrumb -->
			<!-- begin page-header -->
			<h1 class="page-header">Timeline <small>header small text goes here...</small></h1>
			<!-- end page-header -->
			
			<!-- begin timeline -->
			<ul class="timeline">
			    <li>
			        <!-- begin timeline-time -->
			        <div class="timeline-time">
			            <span class="date">today</span>
			            <span class="time">04:20</span>
			        </div>
			        <!-- end timeline-time -->
			        <!-- begin timeline-icon -->
			        <div class="timeline-icon">
			            <a href="javascript:;"><i class="fa fa-paper-plane"></i></a>
			        </div>
			        <!-- end timeline-icon -->
			        <!-- begin timeline-body -->
			        <div class="timeline-body">
			            <div class="timeline-header">
			                <span class="userimage"><img src="assets/public/img/user-1.jpg" alt="" /></span>
			                <span class="username"><a href="javascript:;">John Smith</a> <small></small></span>
			                <span class="pull-right text-muted">18 Views</span>
			            </div>
			            <div class="timeline-content">
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc faucibus turpis quis tincidunt luctus.
                                Nam sagittis dui in nunc consequat, in imperdiet nunc sagittis.
                            </p>
			            </div>
			            <div class="timeline-footer">
			                <a href="javascript:;" class="m-r-15"><i class="fa fa-thumbs-up fa-fw"></i> Like</a>
			                <a href="javascript:;"><i class="fa fa-comments fa-fw"></i> Comment</a>
			            </div>
			        </div>
			        <!-- end timeline-body -->
			    </li>
			    <li>
			        <!-- begin timeline-time -->
			        <div class="timeline-time">
			            <span class="date">yesterday</span>
			            <span class="time">20:17</span>
			        </div>
			        <!-- end timeline-time -->
			        <!-- begin timeline-icon -->
			        <div class="timeline-icon">
			            <a href="javascript:;"><i class="fa fa-map-marker"></i></a>
			        </div>
			        <!-- end timeline-icon -->
			        <!-- begin timeline-body -->
			        <div class="timeline-body">
			            <div class="timeline-header">
			                <span class="userimage"><img src="assets/public/img/user-2.jpg" alt="" /></span>
			                <span class="username">Darren Parrase</span>
			                <span class="pull-right text-muted">82 Views</span>
			            </div>
			            <div class="timeline-content">
                            <p>Location: United Sate</p>
                            <div id="google-map" class="height-sm m-b-10"></div>
                        </div>
			            <div class="timeline-footer">
			                <a href="javascript:;" class="m-r-15"><i class="fa fa-thumbs-up fa-fw"></i> Like</a>
			                <a href="javascript:;"><i class="fa fa-comments fa-fw"></i> Comment</a>
			            </div>
			        </div>
			        <!-- end timeline-body -->
			    </li>
			    <li>
			        <!-- begin timeline-time -->
			        <div class="timeline-time">
			            <span class="date">24 February 2014</span>
			            <span class="time">08:17</span>
			        </div>
			        <!-- end timeline-time -->
			        <!-- begin timeline-icon -->
			        <div class="timeline-icon">
			            <a href="javascript:;"><i class="fa fa-edit"></i></a>
			        </div>
			        <!-- end timeline-icon -->
			        <!-- begin timeline-body -->
			        <div class="timeline-body">
			            <div class="timeline-header">
			                <span class="userimage"><img src="assets/public/img/user-6.jpg" alt="" /></span>
			                <span class="username">Richard Leong</span>
			                <span class="pull-right text-muted">1,282 Views</span>
			            </div>
			            <div class="timeline-content">
                            <p class="lead">
                                <i class="fa fa-quote-left fa-fw pull-left"></i>
                                Quisque sed varius nisl. Nulla facilisi. Phasellus consequat sapien sit amet nibh molestie placerat. Donec nulla quam, ullamcorper ut velit vitae, lobortis condimentum magna. Suspendisse mollis in sem vel mollis.
                                <i class="fa fa-quote-right fa-fw pull-right"></i>
                            </p>
                        </div>
			            <div class="timeline-footer">
			                <a href="javascript:;" class="m-r-15"><i class="fa fa-thumbs-up fa-fw"></i> Like</a>
			                <a href="javascript:;"><i class="fa fa-comments fa-fw"></i> Comment</a>
			            </div>
			        </div>
			        <!-- end timeline-body -->
			    </li>
			    <li>
			        <!-- begin timeline-time -->
			        <div class="timeline-time">
			            <span class="date">10 January 2014</span>
			            <span class="time">20:43</span>
			        </div>
			        <!-- end timeline-time -->
			        <!-- begin timeline-icon -->
			        <div class="timeline-icon">
			            <a href="javascript:;"><i class="fa fa-camera"></i></a>
			        </div>
			        <!-- end timeline-icon -->
			        <!-- begin timeline-body -->
			        <div class="timeline-body">
			            <div class="timeline-header">
			                <span class="userimage"><img src="assets/public/img/user-7.jpg" alt="" /></span>
			                <span class="username">Lelouch Wong</span>
			                <span class="pull-right text-muted">1,021,282 Views</span>
			            </div>
			            <div class="timeline-content">
			                <h4 class="template-title">
			                    <i class="fa fa-map-marker text-danger fa-fw"></i>
			                    795 Folsom Ave, Suite 600 San Francisco, CA 94107
			                </h4>
			                <p>In hac habitasse platea dictumst. Pellentesque bibendum id sem nec faucibus. Maecenas molestie, augue vel accumsan rutrum, massa mi rutrum odio, id luctus mauris nibh ut leo.</p>
                            <p class="m-t-20">
                                <img src="assets/public/img/gallery/gallery-4.jpg" alt="" />
                            </p>
                        </div>
			            <div class="timeline-footer">
			                <a href="javascript:;" class="m-r-15"><i class="fa fa-thumbs-up fa-fw"></i> Like</a>
			                <a href="javascript:;"><i class="fa fa-comments fa-fw"></i> Comment</a>
			            </div>
			        </div>
			        <!-- end timeline-body -->
			    </li>
			    <li>
			        <!-- begin timeline-icon -->
			        <div class="timeline-icon">
			            <a href="javascript:;"><i class="fa fa-spinner"></i></a>
			        </div>
			        <!-- end timeline-icon -->
			        <!-- begin timeline-body -->
			        <div class="timeline-body">
			            Loading...
			        </div>
			        <!-- begin timeline-body -->
			    </li>
			</ul>
			<!-- end timeline -->
		</div>
		<!-- end #content -->
		<!-- begin scroll to top btn -->
		<a href="javascript:;" class="btn btn-icon btn-circle btn-success btn-scroll-to-top fade" data-click="scroll-top"><i class="fa fa-angle-up"></i></a>
		<!-- end scroll to top btn -->
	</div>
	<!-- end page container -->
	
	<!-- ================== BEGIN BASE JS ================== -->
	<script src="assets/public/plugins/jquery/jquery-1.9.1.min.js"></script>
	<script src="assets/public/plugins/jquery/jquery-migrate-1.1.0.min.js"></script>
	<script src="assets/public/plugins/jquery-ui/ui/minified/jquery-ui.min.js"></script>
	<script src="assets/public/plugins/bootstrap/js/bootstrap.min.js"></script>
	<!--[if lt IE 9]>
		<script src="assets/public/crossbrowserjs/html5shiv.js"></script>
		<script src="assets/public/crossbrowserjs/respond.min.js"></script>
		<script src="assets/public/crossbrowserjs/excanvas.min.js"></script>
	<![endif]-->
	<script src="assets/public/plugins/slimscroll/jquery.slimscroll.min.js"></script>
	<script src="assets/public/plugins/jquery-cookie/jquery.cookie.js"></script>
	<!-- ================== END BASE JS ================== -->
	
	<!-- ================== BEGIN PAGE LEVEL JS ================== -->
	<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script>
	<script src="assets/public/js/timeline.demo.min.js"></script>
	<script src="assets/public/js/apps.min.js"></script>
	<!-- ================== END PAGE LEVEL JS ================== -->
	
	<script>
		$(document).ready(function() {
			App.init();
			Timeline.init();
		});
	</script>
	 
</body>
</html>
